<template>
    <div class="business">
        <div class="business_top_choose">
            <el-date-picker
                v-model="chooseMonth"
                type="month"
                :clearable="false"
                @change="changeChooseMonth"
                placeholder="选择月">
            </el-date-picker>
        </div>
        <div class="top_export">
            <!-- <el-button class="exportButtonArea"  type="text" @click="handleExportArea">导出</el-button> -->
            <el-table
                :data="areaBusinessList"
                row-key="areaId"
                lazy
                :load="treeLoad"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                stripe
                :row-style="{height: '0'}"
                :cell-style="{padding: '10px'}"
                style="width: 100%">
                <el-table-column
                    prop="area"
                    align='center'
                    show-overflow-tooltip
                    label="区域">
                </el-table-column>
                <el-table-column
                    prop="businessTotalNum"
                    align='center'
                    show-overflow-tooltip
                    label="商务总人数">
                </el-table-column>
                <el-table-column
                    prop="hasOrderBusinessNum"
                    align='center'
                    show-overflow-tooltip
                    label="已开单商务人数">
                </el-table-column>
                <el-table-column
                    prop="orderTotalPrice"
                    align='center'
                    show-overflow-tooltip
                    label="开单总额">
                </el-table-column>
                <el-table-column
                    prop="innerPrice"
                    align='center'
                    show-overflow-tooltip
                    label="内部货值">
                </el-table-column>
                
                <el-table-column
                    prop="noPayRollRate"
                    align='center'
                    show-overflow-tooltip
                    label="去资利润">
                </el-table-column>
                <el-table-column
                    prop="hasCheckRate"
                    align='center'
                    show-overflow-tooltip
                    label="成交比例%">
                </el-table-column>
                
                
            </el-table>
        </div>
        <div class="bottom">
            <div class="choose">
                <div class="choose_select">
                    <div style="display: flex;align-items: center;margin: 10px 0;">
                        <div style="padding-right: 10px; max-width: 50%;" class="choose_title">区域</div>
                        <el-select v-model="area" placeholder="区域" clearable @change="changeSelectArea">
                            <el-option
                            v-for="item in areaList"
                            :key="item.id"
                            :label="item.sysValueName"
                            :value="item.sysValueName">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="choose_select">
                    <div style="display: flex;align-items: center;margin: 10px 0;">
                        <div style="padding-right: 10px; max-width: 50%;" class="choose_title">分组</div>
                        <el-select v-model="groupId" placeholder="分组" clearable>
                            <el-option
                            v-for="item in groupList"
                            :key="item.id"
                            :label="item.sysValueName"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="choose_select">
                    <div style="display: flex;align-items: center;margin: 10px 0;">
                        <div style="padding-right: 10px; max-width: 50%;" class="choose_title">商务</div>
                        <el-select v-model="businessIds" filterable multiple placeholder="商务" clearable @change="changeSelect">
                            <el-option
                            v-for="item in businessList"
                            :key="item.id"
                            :label="item.username"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <el-button class="chooseSerch" type="primary" @click="getList()">查询</el-button>

                    <el-button class="exportButtonCheck"  type="text" @click="handleExport">导出</el-button>
            </div>
            <el-table
                :data="tableList"
                stripe
                height='500'
                :row-style="{height: '0'}"
                :cell-style="{padding: '3px'}"
                style="width: 100%">
                <el-table-column
                    prop="area"
                    align='center'
                    show-overflow-tooltip
                    label="区域">
                </el-table-column>
                <el-table-column
                    prop="groupName"
                    align='center'
                    show-overflow-tooltip
                    label="分组">
                </el-table-column>
                <el-table-column
                    prop="businessName"
                    align='center'
                    show-overflow-tooltip
                    label="商务">
                </el-table-column>
                <el-table-column
                    prop="basicSalary"
                    align='center'
                    show-overflow-tooltip
                    label="底薪">
                </el-table-column>
                <el-table-column
                    prop="payRollPrice"
                    align='center'
                    show-overflow-tooltip
                    label="实际工资">
                </el-table-column>
                <el-table-column
                    prop="projectRate"
                    align='center'
                    show-overflow-tooltip
                    label="毛利">
                </el-table-column>
                <el-table-column
                    prop="noPayRollRate"
                    align='center'
                    show-overflow-tooltip
                    label="去工资后利润">
                </el-table-column>
                <el-table-column
                    prop="rateTimes"
                    align='center'
                    show-overflow-tooltip
                    label="利润倍数">
                </el-table-column>
                <el-table-column
                    prop="blindBoxRate"
                    align='center'
                    show-overflow-tooltip
                    label="盲盒售卖利润">
                </el-table-column>
                <el-table-column
                    prop="rateLevelName"
                    align='center'
                    show-overflow-tooltip
                    label="评级">
                    <template slot-scope="scope">
                        <!-- <div class="total_grade1"> -->
                            <div>{{scope.row.rateLevelName}}</div>
                        <!-- </div> -->
                    </template>
                </el-table-column>
                <el-table-column
                    prop="innerPrice"
                    align='center'
                    show-overflow-tooltip
                    label="内部货值">
                </el-table-column>
                <el-table-column
                    prop="goodPayRollRate"
                    align='center'
                    show-overflow-tooltip
                    label="货值工资比" :render-header="renderHeader">
                </el-table-column>
                <el-table-column
                    prop="performanceGoodsPrice"
                    align='center'
                    show-overflow-tooltip
                    label="绩效货值">
                </el-table-column>
                
                <el-table-column
                    prop="businessId"
                    align='center'
                    show-overflow-tooltip
                    label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleViewClick(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    layout="prev, pager, next"
                    :page-size='pageSize'
                    @current-change="changePageNum"
                    :total="totalNum">
                </el-pagination>
            </div>
        </div>
        <!-- 商务绩效统计表 -->
        <div class="bottom">
            <div class="choose">
                
                <div class="choose_select">
                    <div style="display: flex;align-items: center;margin: 10px 0;">
                        <div style="padding-right: 10px; max-width: 50%;" class="choose_title">到货时间</div>
                        <el-date-picker
                            v-model="chooseArriveTime"
                            type="month"
                            :clearable="false"
                            placeholder="选择月">
                        </el-date-picker>
                    </div>
                    
                </div>
                
                <div class="choose_select">
                    <div style="display: flex;align-items: center;margin: 10px 0;">
                        <div style="padding-right: 10px; max-width: 50%;" class="choose_title">区域</div>
                        <el-select v-model="area3" placeholder="区域" clearable @change="changeSelectArea">
                            <el-option
                            v-for="item in areaList3"
                            :key="item.id"
                            :label="item.sysValueName"
                            :value="item.sysValueName">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="choose_select">
                    <div style="display: flex;align-items: center;margin: 10px 0;">
                        <div style="padding-right: 10px; max-width: 50%;" class="choose_title">分组</div>
                        <el-select v-model="groupId3" placeholder="分组" clearable>
                            <el-option
                            v-for="item in groupList3"
                            :key="item.id"
                            :label="item.sysValueName"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="choose_select">
                    <div style="display: flex;align-items: center;margin: 10px 0;">
                        <div style="padding-right: 10px; max-width: 50%;" class="choose_title">商务</div>
                        <el-select v-model="businessIds3" filterable multiple placeholder="商务" clearable >
                            <el-option
                            v-for="item in businessList3"
                            :key="item.id"
                            :label="item.username"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </div>

                <el-button class="chooseSerch" type="primary" @click="getBusinessPerformanceList()">查询</el-button>

                    <el-button class="exportButtonCheck"  type="text" @click="handelExportPerformanceList">导出</el-button>
            </div>
            <el-table
                :data="businessPerformanceList"
                stripe
                height='500'
                :row-style="{height: '40px'}"
                :cell-style="{padding: '3px'}"
                style="width: 100%">
                <el-table-column
                    prop="area"
                    align='center'
                    show-overflow-tooltip
                    label="区域">
                </el-table-column>
                <el-table-column
                    prop="groupName"
                    align='center'
                    show-overflow-tooltip
                    label="分组">
                </el-table-column>
                <el-table-column
                    prop="businessName"
                    align='center'
                    show-overflow-tooltip
                    label="商务">
                </el-table-column>
                <el-table-column
                    prop="basicSalary"
                    align='center'
                    show-overflow-tooltip
                    label="底薪">
                </el-table-column>
                <el-table-column
                    prop="performanceGoodsPrice"
                    align='center'
                    show-overflow-tooltip
                    label="绩效货值">
                </el-table-column>
                <el-table-column
                    prop="monthArriveInnerPrice"
                    align='center'
                    show-overflow-tooltip
                    label="月度到货内部货值">
                </el-table-column>
                <el-table-column
                    prop="monthlyPerformanceGoodsRate"
                    align='center'
                    show-overflow-tooltip
                    label="月度绩效完成进度(%)">
                </el-table-column>
                <el-table-column
                    prop="quarterArriveInnerPrice"
                    align='center'
                    show-overflow-tooltip
                    label="季度到货内部货值">
                </el-table-column>
                <el-table-column
                    prop="quarterPerformanceGoodsRate"
                    align='center'
                    show-overflow-tooltip
                    label="季度绩效完成进度(%)">
                </el-table-column>
                <el-table-column
                    prop="yearArriveInnerPrice"
                    align='center'
                    show-overflow-tooltip
                    label="年度到货内部货值">
                </el-table-column>
                <el-table-column
                    prop="yearPerformanceGoodsRate"
                    align='center'
                    show-overflow-tooltip
                    label="年度绩效完成进度(%)">
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    layout="prev, pager, next"
                    :page-size='pageSize'
                    @current-change="changePageNum3"
                    :total="totalNum2">
                </el-pagination>
            </div>
        </div>
        <div class="bottom">
            <div class="choose">
                <div class="dashboard_change">
                    <div 
                    class="dashboard_change_botton dashboard_change_botton_left" 
                    :class="blindType == 1 ? 'dashboard_change_botton_choose' : ''" 
                    @click="changeChooseType(1)">
                      <div>不去盲盒</div>
                    </div>
                    <div 
                    class="dashboard_change_botton dashboard_change_botton_right" 
                    :class="blindType == 2 ? 'dashboard_change_botton_choose' : ''" 
                    @click="changeChooseType(2)">
                      <div>去盲盒</div>
                    </div>
                </div>
                <div class="choose_select">
                    <div style="display: flex;align-items: center;margin: 10px 0;">
                        <div style="padding-right: 10px; max-width: 50%;" class="choose_title">日期</div>
                        <el-date-picker
                            v-model="chooseYear"
                            type="year"
                            :clearable="false"
                            >
                        </el-date-picker>
                    </div>
                </div>
                <div class="choose_select">
                    <div style="display: flex;align-items: center;margin: 10px 0;">
                        <div style="padding-right: 10px; max-width: 50%;" class="choose_title">区域</div>
                        <el-select v-model="area2" placeholder="区域" clearable @change="changeSelectArea2">
                            <el-option
                            v-for="item in areaList2"
                            :key="item.id"
                            :label="item.sysValueName"
                            :value="item.sysValueName">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="choose_select">
                    <div style="display: flex;align-items: center;margin: 10px 0;">
                        <div style="padding-right: 10px; max-width: 50%;" class="choose_title">商务</div>
                        <el-select v-model="businessIds2" filterable multiple placeholder="商务" clearable @change="changeSelect2">
                            <el-option
                            v-for="item in businessList2"
                            :key="item.id"
                            :label="item.username"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <el-button class="chooseSerch" type="primary" @click="getTotalPersonProfitList">查询</el-button>

                    <el-button class="exportButtonCheck" type="text" @click="handleExportTotalPersonProfit">导出</el-button>
            </div>
            <el-table
                :data="totalPersonProfitList"
                stripe
                height='500'
                :row-style="{height: '100'}"
                :cell-style="{padding: '3px'}"
                v-loading="tableLoading1"

                style="width: 100%">
                <el-table-column
                    prop="area"
                    align='center'
                    show-overflow-tooltip
                    label="区域"
                    >
                </el-table-column>
                
                <el-table-column
                    prop="name"
                    align='center'
                    show-overflow-tooltip
                    label="商务">
                </el-table-column>
                <el-table-column
                    prop="totalPersonProfit"
                    align='center'
                    show-overflow-tooltip
                    label="累计利润"
                    width="100px"
                    >
                </el-table-column>
                <el-table-column
                    prop="yearTotalPersonProfit"
                    align='center'
                    label="年度累计利润"
                    width="180px"

                    >
                </el-table-column>
                <el-table-column
                    prop="januaryPersonProfit"
                    align='center'
                    width="180px"

                    label="1月">
                </el-table-column>
                <el-table-column
                    prop="februaryPersonProfit"
                    align='center'
                    width="180px"
                    label="2月">
                </el-table-column>
                <el-table-column
                    prop="marchPersonProfit"
                    align='center'
                    width="180px"
                    label="3月">
                </el-table-column>
                <el-table-column
                    prop="aprilPersonProfit"
                    align='center'
                    width="180px"
                    label="4月">
                </el-table-column>
                <el-table-column
                    prop="mayPersonProfit"
                    align='center'
                    width="180px"
                    label="5月">
                </el-table-column>
                <el-table-column
                    prop="junePersonProfit"
                    align='center'
                    width="180px"
                    label="6月">
                </el-table-column>
                <el-table-column
                    prop="julyPersonProfit"
                    align='center'
                    width="180px"
                    label="7月">
                </el-table-column>
                <el-table-column
                    prop="augustPersonProfit"
                    align='center'
                    width="180px"
                    label="8月">
                </el-table-column>
                <el-table-column
                    prop="septemberPersonProfit"
                    align='center'
                    width="180px"
                    label="9月">
                </el-table-column>
                <el-table-column
                    prop="octoberPersonProfit"
                    align='center'
                    width="180px"
                    label="10月">
                </el-table-column>
                <el-table-column
                    prop="novemberPersonProfit"
                    align='center'
                    width="180px"
                    label="11月">
                </el-table-column>
                <el-table-column
                    prop="decemberPersonProfit"
                    align='center'
                    width="180px"
                    label="12月">
                </el-table-column>
                

            </el-table>
            <div class="block">
                <el-pagination
                    layout="prev, pager, next"
                    :page-size='pageSize'
                    @current-change="changePageNum2"
                    :total="totalNum3">
                </el-pagination>
            </div>
        </div>

        <businessMsg :business-id="openBusinessId" :is-open="openBusinessMsgStatus" @close="closeBusinessMsg"></businessMsg>

    </div>
</template>

<script>

import API from "@/api/apiHome";
import APISysLabel from "@/api/apiSysLabel";
import APIBusiness from "@/api/apiBusiness";
import businessMsg from "@/components/BusinessMsg";
export default {
    name: "TotalBusiness",
    components: {
        businessMsg,
    },
    data() {
        return {
            chooseYear: new Date(),
            showType: 1,
            showCenterType: 1, // 本月卖货变现最右边的增加还是减少，1为增加，2为减少
            tableList: [],
            areaBusinessList: [],
            totalPersonProfitList: [],
            businessPerformanceList: [],
            showTableList: [],
            groupId:null,
            groupId3:null,
            pageNum: 1,
            pageSize: 20,
            
            totalNum: 10,
            totalNum2: 10,
            totalNum3: 10,
            blindType: 1,
            chooseMonth: new Date(),
            chooseArriveTime: new Date(),
            dataMsg: {},
            openBusinessMsgStatus: false,
            openBusinessId: null,
            areaList: [],
            areaList2: [],
            areaList3: [],
            businessList: [],
            businessList2: [],
            businessList3: [],
            businessIds: [],
            businessIds2: [],
            businessIds3: [],
            groupList: [],
            groupList3: [],
            area: null,
            area2:null,
            area3:null,
            tableLoading1: true,
        };
    },
    created() {
        this.dataList = []
        this.pageNum = 1
        this.getMsg()
        this.getSysLabel()
        this.getGroupList()
        this.getGroupList3()

        this.getBusinessList()
        this.getBusinessList2()
        this.getBusinessList3()
        this.getList()
        this.getBusinessPerformanceList()
        this.getTotalPersonProfitList()
    },
    watch: {
        '$route': function (to, from) {
            this.getMsg()
            this.getSysLabel()
            this.getBusinessList()
            this.getList()
            this.getBusinessList2()
            this.getBusinessList3()
        }
    },
    methods: {
        getGroupList() {
            const params = {
                token: this.$store.state.token,
            };
            // if(this.area){
            //     this.areaList.forEach(item =>{
            //         if(item.sysValueName == this.area){
            //             params.targetId = item.id
            //         }
            //     })
            // }
            APISysLabel.selectAllGroup(params).then((res) => {
                if (res.key === 1000) {
                    res = res.result;
                    this.groupList = res.list
                }
            });
        },
        getGroupList3() {
            const params = {
                token: this.$store.state.token,
            };
            APISysLabel.selectAllGroup(params).then((res) => {
                if (res.key === 1000) {
                    res = res.result;
                    this.groupList3 = res.list
                }
            });
        },
        changeChooseType(e){
            this.blindType = e
            //this.getTotalPersonProfitList()
        },
        changeSelectArea(val){
            //this.getList()
            this.getBusinessList()
        },
        changeSelectArea2(val){
            //this.getTotalPersonProfitList()
            this.getBusinessList2()
        },
        changeSelectArea3(val){
            this.getBusinessList3()
        },
        changeSelect(val){
            //this.getList()
        },
        changeSelect2(val){
            //this.getTotalPersonProfitList()
        },
        getBusinessList(){
            this.$bus.$emit("show-loading", true);
            const params = {
                token: this.$store.state.token,
            };
            if(this.area){
                params.area = this.area
            }
            APIBusiness.getBusinessList(params).then((res) => {
                if (res.key === 1000) {
                    this.businessList = res.result.list;
                }
                this.$bus.$emit("show-loading", false);
            });
        },
        getBusinessList2(){
            this.$bus.$emit("show-loading", true);
            const params = {
                token: this.$store.state.token,
            };
            if(this.area2){
                params.area = this.area2
            }
            APIBusiness.getBusinessList(params).then((res) => {
                if (res.key === 1000) {
                    this.businessList2 = res.result.list;
                }
                this.$bus.$emit("show-loading", false);
            });
        },
        getBusinessList3(){
            this.$bus.$emit("show-loading", true);
            const params = {
                token: this.$store.state.token,
            };
            if(this.area3){
                params.area = this.area3
            }
            APIBusiness.getBusinessList(params).then((res) => {
                if (res.key === 1000) {
                    this.businessList3 = res.result.list;
                }
                this.$bus.$emit("show-loading", false);
            });
        },
        getSysLabel() {
            this.$bus.$emit("show-loading", true);
            const params = {
                token: this.$store.state.token,
                sysLabelIds: '3',
            };
            APISysLabel.getSysLabelValueManageList(params).then((res) => {
                if (res.key === 1000) {
                    this.areaList = res.result.data[3];
                    this.areaList2 = res.result.data[3];
                    this.areaList3 = res.result.data[3];
                }
                this.$bus.$emit("show-loading", false);
            });
        },
        closeBusinessMsg(){
            this.openBusinessMsgStatus = false
            this.openBusinessId = null
        },
        handleViewClick(row){
            this.openBusinessMsgStatus = true
            this.openBusinessId = row.businessId
        },
        changeChooseMonth(){
            this.pageNum = 1
            this.dataList = []
            this.getMsg()
            this.getList()
        },
        getList(){
            this.tableLoading = true;
            const params = {
                token: this.$store.state.token,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                time: this.chooseMonth.getTime(),
            };
            if(this.businessIds && this.businessIds.length > 0){
                params.businessIds = this.businessIds.join(",")
            }
            if(this.area){
                params.area = this.area
            }
            if(this.groupId){
                params.targetId = this.groupId
            }
            API.getBusinessHomeMonthList(params).then((res) => {
                if (res.key === 1000) {
                    res = res.result;
                    this.totalNum = res.count;
                    res.list.forEach(item => {
                        if(item.rateLevel == 0){
                            item.rateLevelName = '极差'
                        }
                        if(item.rateLevel){
                            item.rateLevelName = item.rateLevel < 1 ? '极差' : (item.rateLevel >= 1 && item.rateLevel < 3) ? '差' : (item.rateLevel >= 3 && item.rateLevel < 5) ? '良好' : item.rateLevel >= 5 ? '优秀' : '--'
                        }
                    })
                    this.tableList = res.list;
                    this.tableLoading = false;
                }
            });
        },
        getBusinessPerformanceList(){
            this.tableLoading = true;
            const params = {
                token: this.$store.state.token,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                arriveTime : this.chooseArriveTime.getTime()
            };
            if(this.businessIds3 && this.businessIds3.length > 0){
                params.businessIds = this.businessIds3.join(",")
            }
            if(this.area3){
                params.area = this.area3
            }
            if(this.groupId3){
                params.targetId = this.groupId3
            }
            API.getBusinessPerformanceList(params).then((res) => {
                if (res.key === 1000) {
                    res = res.result;     
                    this.totalNum2 = res.count;               
                    this.businessPerformanceList = res.list;
                    this.tableLoading = false;
                }
            });
        },

        getTotalPersonProfitList(){
            this.tableLoading1 = true;
            const params = {
                token: this.$store.state.token,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                time: this.chooseYear.getTime()
            };
            if(this.businessIds2 && this.businessIds2.length > 0){
                params.businessIds = this.businessIds2.join(",")
            }
            if(this.area2){
                params.area = this.area2
            }
            if(this.blindType){
                params.blindType = this.blindType
            }
            
            APIBusiness.getTotalPersonProfit(params).then((res) => {
                if (res.key === 1000) {
                    res = res.result;
                    this.totalNum3 = res.count;
                    this.totalPersonProfitList = res.list;
                    this.tableLoading1 = false;
                }
            });
        },
        changePageNum(e){
            this.pageNum = e
            this.getList()
        },
        changePageNum2(e){
            this.pageNum = e
            this.getTotalPersonProfitList()
        },
        changePageNum3(e){
            this.pageNum = e
            this.getBusinessPerformanceList()
        },
        getMsg() {
            this.tableLoading = true;
            const params = {
                token: this.$store.state.token,
                time: this.chooseMonth.getTime()
            };
            API.getBusinessHomeMonth(params).then((res) => {
                if (res.key === 1000) {
                    res = res.result;
                    const jsonObj = this;
                    this.areaBusinessList = res.list;
                    this.areaBusinessList.forEach(item =>{
                        item.hasChildren = true
                        
                    })
                    console.log(this.areaBusinessList)
                    this.tableLoading = false;
                }
            });
        },
          // 树形动态加载表单数据：
        treeLoad(tree, treeNode, resolve) {

            const params = {
                token: this.$store.state.token,
                time: this.chooseMonth.getTime(),
                areaId : tree.areaId
            };
            // //将当前选中节点存储到maps中去
            // this.maps.set(projectId, {tree, treeNode, resolve});
            API.getChildrenList(params).then(response => {
                const menuList = response.result.list;
                resolve(menuList);
            })
            
        },
        renderHeader (h,{column}) {
            return (
                <div>货值工资比
                    <el-tooltip class="tooltip" effect="dark" placement="right">
                        <ul slot="content">
                            <li>货值工资比=内部货值/工资</li>
                        </ul>
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </div>
            );
        },
        
        handleExport() {
            if(!this.tableList || this.tableList.length <= 0){
                this.$message({
                    type: 'error',
                    message: '无项目可以进行导出'
                });
                return
            }
            this.tableLoading = true;
            const params = {
                token: this.$store.state.token,
                time: this.chooseMonth.getTime(),
            };
            if(this.businessIds && this.businessIds.length > 0){
                params.businessIds = this.businessIds.join(",")
            }
            if(this.area){
                params.area = this.area
            }
            API.doExportBusiness(params).then((res) => {
                if (res) {
                    const content = res.data;
                    const blob = new Blob([content]);
                    // 从response的headers中获取filename,
                    // 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
                    var contentDisposition = res.headers["content-disposition"];
                    var patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
                    var result = patt.exec(contentDisposition);
                    const fileName = decodeURI(result[1]);
                    if ("download" in document.createElement("a")) {
                        // 非IE下载
                        const elink = document.createElement("a");
                        elink.download = fileName;
                        elink.style.display = "none";
                        elink.href = URL.createObjectURL(blob);
                        document.body.appendChild(elink);
                        elink.click();
                        URL.revokeObjectURL(elink.href); // 释放URL 对象
                        document.body.removeChild(elink);
                    } else {
                        // IE10+下载
                        navigator.msSaveBlob(blob, fileName);
                    }
                }
            });
        },
        handelExportPerformanceList() {
            if(!this.tableList || this.tableList.length <= 0){
                this.$message({
                    type: 'error',
                    message: '无项目可以进行导出'
                });
                return
            }

            this.tableLoading = true;
            const params = {
                token: this.$store.state.token,
                
                arriveTime : this.chooseArriveTime.getTime()
            };
            if(this.businessIds3 && this.businessIds3.length > 0){
                params.businessIds = this.businessIds3.join(",")
            }
            if(this.area3){
                params.area = this.area3
            }
            if(this.groupId3){
                params.targetId = this.groupId3
            }
            API.doExportPerformanceList(params).then((res) => {
                if (res) {
                    const content = res.data;
                    const blob = new Blob([content]);
                    // 从response的headers中获取filename,
                    // 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
                    var contentDisposition = res.headers["content-disposition"];
                    var patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
                    var result = patt.exec(contentDisposition);
                    const fileName = decodeURI(result[1]);
                    if ("download" in document.createElement("a")) {
                        // 非IE下载
                        const elink = document.createElement("a");
                        elink.download = fileName;
                        elink.style.display = "none";
                        elink.href = URL.createObjectURL(blob);
                        document.body.appendChild(elink);
                        elink.click();
                        URL.revokeObjectURL(elink.href); // 释放URL 对象
                        document.body.removeChild(elink);
                    } else {
                        // IE10+下载
                        navigator.msSaveBlob(blob, fileName);
                    }
                }
            });
        },

        handleExportTotalPersonProfit() {
            if(!this.tableList || this.tableList.length <= 0){
                this.$message({
                    type: 'error',
                    message: '无项目可以进行导出'
                });
                return
            }
            
            this.tableLoading1 = true;
            
            const params = {
                token: this.$store.state.token,
                
                time: this.chooseYear.getTime()
            };
            if(this.businessIds2 && this.businessIds2.length > 0){
                params.businessIds = this.businessIds2.join(",")
            }
            if(this.area2){
                params.area = this.area2
            }
            if(this.blindType){
                params.blindType = this.blindType
            }
            API.doExportTotalPersonProfit(params).then((res) => {
                if (res) {
                    const content = res.data;
                    const blob = new Blob([content]);
                    // 从response的headers中获取filename,
                    // 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
                    var contentDisposition = res.headers["content-disposition"];
                    var patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
                    var result = patt.exec(contentDisposition);
                    const fileName = decodeURI(result[1]);
                    if ("download" in document.createElement("a")) {
                        // 非IE下载
                        const elink = document.createElement("a");
                        elink.download = fileName;
                        elink.style.display = "none";
                        elink.href = URL.createObjectURL(blob);
                        document.body.appendChild(elink);
                        elink.click();
                        URL.revokeObjectURL(elink.href); // 释放URL 对象
                        document.body.removeChild(elink);
                    } else {
                        // IE10+下载
                        navigator.msSaveBlob(blob, fileName);
                    }
                    this.tableLoading1 = false;
                }
            });
        },

        handleExportArea() {
            if(!this.tableList || this.tableList.length <= 0){
                this.$message({
                    type: 'error',
                    message: '无项目可以进行导出'
                });
                return
            }
            this.tableLoading = true;
            const params = {
                token: this.$store.state.token,
                time: this.chooseMonth.getTime()
            };
            
            API.doExportAreaBusiness(params).then((res) => {
                if (res) {
                    const content = res.data;
                    const blob = new Blob([content]);
                    // 从response的headers中获取filename,
                    // 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
                    var contentDisposition = res.headers["content-disposition"];
                    var patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
                    var result = patt.exec(contentDisposition);
                    const fileName = decodeURI(result[1]);
                    if ("download" in document.createElement("a")) {
                        // 非IE下载
                        const elink = document.createElement("a");
                        elink.download = fileName;
                        elink.style.display = "none";
                        elink.href = URL.createObjectURL(blob);
                        document.body.appendChild(elink);
                        elink.click();
                        URL.revokeObjectURL(elink.href); // 释放URL 对象
                        document.body.removeChild(elink);
                    } else {
                        // IE10+下载
                        navigator.msSaveBlob(blob, fileName);
                    }
                }
            });
        },
        formatterTime(time) {
            return this.$moment(time).format("YYYY-MM-DD HH:mm:ss");
        },
    }
};
</script>
<style scoped>
    .progress{
        height: 11px; /*进度条轨道的高度*/
        border: 1px solid #294F92; 
        background: #f1f3f4; /*轨道的颜色*/
        box-shadow: none;
        overflow: hidden;
        border-radius: 50px !important;
    }
    .progress-bar{
        /* width: 50%; 控制进度条的进度 */
        background: linear-gradient(to right, #294F92 0%, #294F92 100%);
        height: 9px;
        border-radius: 30px !important;
        /* 设置的文字的样式 */
        font-size: 14px;
        line-height: 9px;
        color: #fff;
        text-align: center;
    }
</style>
<style scoped>
.dashboard_change{
  display: flex;
  justify-content: flex-end;
  margin-top: 0px;
}
.chooseSerch{
    margin-left: 20px;
}
.dashboard_change_botton{
  border: 1px solid #0b57d0;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  padding: 10px 20px;
}
.dashboard_change_botton_left{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0px;
}
.dashboard_change_botton_right{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.dashboard_change_botton_choose{
  color: white;
  background-color: #0b57d0;
}
.exportButtonArea{
    position: absolute; /* 设置button为绝对定位 */  
    top: -50px;
    right: 0px;  
    font-size: 18px;
    font-weight: 400;
}

.exportButtonCheck{
    position: absolute; /* 设置button为绝对定位 */  
    top: 17px;
    right: 0px;  
    font-size: 18px;
    font-weight: 400;
}
.business{
    padding-bottom: 100px;
    
}
.business_top{
    justify-content: space-between;
    display: flex;
    padding-top: 60px;
}
.business_top_left{
    left: 0;
    width: 25%;
    height: 260px;
}
.business_top_left_top{
    border-radius: 15px;
    box-shadow: 3px 3px #F0EFF5;
    text-align: center;
    margin: 20px auto;
    height: 240px;
}
.business_top_left_bottom{
    padding-top: 20px;
    border-radius: 15px;
    box-shadow: 3px 3px #F0EFF5;
    text-align: center;
    margin: 20px auto;
    padding-bottom: 20px;
}
.center_left_down_text{
    display: inline-block;
}
.center_left_down_text_title{
    border-left: 5px solid #FF4E00;
    color: #707070;
    font-size: 20px;
    font-weight: bolder;
    padding-left: 10px;
}
.center_left_down_text_title div{
    padding-left: 10px;
}
.center_left_down_text_content{
    margin: 15px 0;
    font-size: 30px;
    font-weight: bolder;
    color: #343336;
}
.business_top_center{
    height: 260px;
    width: 35%;
    border-radius: 15px;
    box-shadow: 3px 3px #F0EFF5;
}
.business_top_center_content{
    margin: 20px auto;
}
.business_top_center_content_title{
    border-left: 5px solid #FF4E00;
    color: #707070;
    font-size: 20px;
    font-weight: bolder;
    padding-left: 10px;
    display: flex;
}
.business_top_center_content_title .price{
    padding-left: 20px;
    color: black;
}
.business_top_center_content_content{
    margin: 10px;
    padding-top: 10px;
}
.business_top_center_content_content1{
    margin: 10px;
    padding-top: 50px;
    display: flex;
}
.business_total_price{
    margin: 12px auto;
}
.business_total_price_title{
    color: #294E92;
    margin: 5px 0;
}
.business_total_price_content{
    display: flex;
}
.business_total_price_content_show{
    padding-left: 10px;
}
.business_top_right{
    right: 0;
    width: 35%;
    height: 260px;
    border-radius: 15px;
    box-shadow: 3px 3px #F0EFF5;
}
.business_top_right_child{
    text-align: center;
    display: grid;
    width: 25%;
    place-items: center;
}
.business_top_right_child_top{
    border-radius: 100%;
    background-color: #D4E2FC;
    width: 60px;
    height: 36px;
    position: relative;
}
.business_top_right_child_top div{
    position: absolute;
    left: 25%;
    right: 25%;
    top: 25%;
}
.business_top_right_child_bottom{
    padding-top: 10px;
    font-weight: bolder;
}
.bottom{
    margin-top: 50px;
    width: 100%;
    border-radius: 10px;
    box-shadow: 3px 3px #F0EFF5;
    position: relative;
}
.total_grade{
    border-radius: 100%;
    background-color: #D4E2FC;
    width: 36px;
    height: 36px;
    position: relative;
}
.total_grade div{
    position: absolute;
    left: 25%;
    right: 25%;
    top: 25%;
}
.total_grade1{
    background-color: #D4E2FC;
    border: 1px solid #D4E2FC;
    border-radius: 100%;
    margin: 0 25px;
    height: 35px;
    position: relative;
}
.total_grade1 div{
    position: absolute;
    left: 20%;
    right: 25%;
    top: 15%;
    bottom: 25%;
}
.bottom_all_city{
    padding-top: 20px;
    display: flex;
    justify-content: center;
}
.bottom_city{
    width: 32%;
    font-size: 20px;
    font-weight: bold;
}
.choose_select{
    padding-left: 30px;
}
.choose{
    margin: 10px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.top_export{
    margin-top: 15px;
    margin-bottom: 10px;
    position: relative;
}
</style>